<template>
  <div
    class="panel-zone-bg flex-1 full-height"
  >
    <!-- <div class="little-title">
      设备运行状态
    </div>
    <div class="d-flex-c flex-1">
      <div class="running-state-box flex-between flex-0">
        <div
          class="d-flex-c online-box flex-1 ai-c c-pointer"
          @click="openRunningDetailModal('0')"
        >
          <div class="f-24 f-w7 ff-agencyyr">
            {{ runningStateInfo.online }}
          </div>
          <div class="running-state-desc">
            在线(个)
          </div>
        </div>
        <div
          class="d-flex-c offline-box flex-1 ai-c c-pointer"
          @click="openRunningDetailModal('1')"
        >
          <div class="f-24 f-w7 ff-agencyyr">
            {{ runningStateInfo.offline }}
          </div>
          <div class="running-state-desc">
            离线(个)
          </div>
        </div>
      </div>
      <div class="flex-between flex-1 pie-chart-panel">
        <div class="overflow-hidden pie-chart position-relative full-height flex-1">
          <BKChart
            :option="pieOptions"
            class="full-box"
          />
          <div class="absolute-center d-flex-c">
            <div>
              <span
                class="f-20 ff-agencyyr f-w7 c-text-blue"
                style="margin-right: 2px;"
              > {{ pieTotal }}</span>
              <span class="f-12">个</span>
            </div>
            <div class="f-14">
              设备
            </div>
          </div>
        </div>
        <div class="d-flex-c flex-0">
          <div
            v-for="legend in pieChartConfig"
            :key="legend.field"
            class="full-width pie-legend flex-between c-pointer"
            @click="openStatusDetailModal(legend.key)"
          >
            <div class="flex-ai-c m-h-tiny">
              <div
                class="color-rect"
                :style="{color:legend.color}"
              />
              <div class="f-12 c-white m-r-mini ws-n ">
                {{ legend.name }}
              </div>
            </div>
            <span
              class="f-20 ff-agencyyr f-w7"
              :style="{color:legend.color}"
            >
              {{ runningStateInfo[legend.field] }}
            </span>
          </div>
        </div>
      </div>
    </div> -->
    <div class="little-title">
      工况（设备）
    </div>
    <div class="d-flex-c flex-1">
      <div class="overflow-hidden full-width position-relative flex-1">
        <BKChart
          :option="tempPieOptions"
          class="full-box"
        />
        <div class="absolute-center d-flex-c">
          <div>
            <span
              class="f-20 ff-agencyyr f-w7"
              style="margin-right: 2px;color: rgb(42, 160, 255);"
            > {{ tempPieTotal }}</span>
            <span class="f-12">个</span>
          </div>
          <div class="f-14">
            监控总数
          </div>
        </div>
      </div>
      <PieChartLegend
        class="flex-0 full-width"
        :value-data="tempPieData"
        :legends="tempPieConfig"
        @select="showReverseCheck"
        extend-class="m-l-mini flex-1"
      />
    </div>
    <DetailModal
      v-if="zwglDetailVisible"
      :visible="zwglDetailVisible"
      :columns="columns"
      :static-data="detailData"
      @close="zwglDetailVisible=false"
      width="976px"
    />
  </div>
</template>
<script>
import { getRingOption } from '@/components/chart/echart-utils'
import DetailModal from '../modal/detail-modal.vue'
import PieChartLegend from '@/views/business/ysqjcdp/components/pie-chart-legend.vue'

const stateMap = {
  0: '正常',
  1: '异常',
  2: '信号弱',
  3: '信号差'
}
export default {
  name: 'EquRunningStatus',
  components: { DetailModal, PieChartLegend },
  data () {
    this.pieChartConfig = [
      { name: '正常', key: '0', color: '#3DFF9A', field: 'normal', unit: '个' },
      { name: '异常', key: '1', color: '#FF5851', field: 'abnormal', unit: '个' },
      { name: '信号弱', key: '2', color: '#FFF600', field: 'r', unit: '个' },
      { name: '信号差', key: '3', color: '#FF9A44', field: 'c', unit: '个' }
    ]
    this.runningColumns = [
      { title: '测站名称', field: 'stcdName', minWidth: 120, align: 'left' },
      { title: '站码', field: 'stcd', width: 120 },
      { title: '设备名', field: 'stationName', width: 120 },
      { title: '设备码', field: 'stationId', width: 120 },
      { title: '设备在线状态', field: 'stateName', width: 120 }
    ]
    this.statusColumns = [
      { title: '测站名称', field: 'stcdName', minWidth: 120, align: 'left' },
      { title: '站码', field: 'stcd', width: 120 },
      { title: '设备名', field: 'stationName', width: 120 },
      { title: '设备码', field: 'stationId', width: 120 },
      { title: '设备运行状态', field: 'stateName', width: 120 }
    ]
    this.tempPieConfig = [
      { name: '正常数量', color: '#0ac2d3', field: 'normal', unit: '个' },
      { name: '异常数量', color: '#FF5851', field: 'abnormal', unit: '个' }
    ]
    this.tempColumns = [
      { title: '设备名', field: 'stationName', minWidth: 120 },
      { title: '设备码', field: 'stationId', width: 140 },
      { title: '分中心', field: 'subcenterName', width: 120 },
      { title: '站类', field: 'stationType', width: 140 },
      { title: '最新数据时间', field: 'dataTime', width: 160 },
      { title: '设备运行状态', field: 'errorReason', width: 140 }
    ]
    return {
      pieOptions: null,
      runningStateInfo: {
        online: 0,
        offline: 0,
        normal: 0,
        abnormal: 0,
        r: 0,
        c: 0
      },
      onlineData: [],
      statusData: [],
      zwglDetailVisible: false,
      detailData: [],
      columns: [],
      // 临时初验用-05.29
      tempPieOptions: null,
      tempPieData: {
        normal: 0,
        abnormal: 0,
        total: 0
      },
      tempAllSiteList: []

    }
  },
  computed: {
    pieTotal () {
      const total = this.pieChartConfig.reduce((pre, cur) => {
        return pre + this.runningStateInfo[cur.field] || 0
      }, 0)
      return total
    },
    tempPieTotal () {
      // const total = this.tempPieConfig.reduce((pre, cur) => {
      //   return pre + this.tempPieData[cur.field] || 0
      // }, 0)
      // return total
      return this.tempPieData.total ?? 0
    }

  },
  created () {
    // this.setPieOptions()
    this.setTempPieOptions()
  },
  methods: {
    async setPieOptions () {
      const onlineData = await this.$request.formDataPost(window.outApiSwpn + 'swpm-admin/swpm/api-server/site-online', {}, false)
      const statusData = await this.$request.formDataPost(window.outApiSwpn + 'swpm-admin/swpm/api-server/query/stcd/mode', {}, false)
      this.onlineData = onlineData?.list?.map(c => { return { ...c, stateName: c.state === '1' ? '离线' : '在线' } }) || []
      this.statusData = statusData.map(c => {
        return {
          ...c,
          stateName: c.dataState === null ? '' : stateMap[c.dataState]
        }
      })
      this.runningStateInfo.online = onlineData.allSiteTotal - onlineData.downlineSiteNum
      this.runningStateInfo.offline = onlineData.downlineSiteNum
      this.runningStateInfo.normal = statusData.filter(c => c.dataState === '0').length
      this.runningStateInfo.abnormal = statusData.filter(c => c.dataState === '1').length
      this.runningStateInfo.r = statusData.filter(c => c.dataState === '2').length
      this.runningStateInfo.c = statusData.filter(c => c.dataState === '3').length
      const result = getRingOption({
        color: this.pieChartConfig.map(item => item.color),
        data: this.pieChartConfig.map(item => {
          return {
            name: item.name,
            value: this.runningStateInfo[item.field] ?? 0
          }
        })
      })
      result.series[0].radius = ['90%', '89%']
      result.series[1].radius = ['80%', '78%']
      result.series[2].radius = ['76%', '78%']
      this.pieOptions = result
    },
    async setTempPieOptions () {
      const token = await this.$request.formDataGet(window.outApiReceiveBackend + '/swpm-admin/swpm/hwapp/login', { userName: 'swcjcyb' }, true)
      const data = await this.$request.formDataPost(window.outApiSwpn + 'swpm-admin/swpm/main-analyse/mode-monitor', { type: 1440, flag: 'Y', subId: 0, sttp: 0 }, false, 'POST', false, {
        Authorization: token
      })
      // console.log({ token, data })
      this.tempPieData = {
        normal: data.normalSiteTotal,
        abnormal: data.errorSiteTotal,
        total: data.siteTotal
      }
      this.tempAllSiteList = data.list ?? []
      const result = getRingOption({
        color: this.tempPieConfig.map(item => item.color),
        data: this.tempPieConfig.map(item => {
          return {
            name: item.name,
            value: this.tempPieData[item.field] ?? 0
          }
        })
      })
      result.series[0].radius = ['90%', '89%']
      result.series[1].radius = ['80%', '78%']
      result.series[2].radius = ['76%', '78%']
      this.tempPieOptions = result
    },
    openRunningDetailModal (type) {
      this.columns = this.runningColumns
      this.detailData = this.onlineData.filter(c => c.state === type)
      this.zwglDetailVisible = true
    },
    openStatusDetailModal (type) {
      this.columns = this.statusColumns
      this.detailData = this.statusData.filter(c => c.dataState === type)
      this.zwglDetailVisible = true
    },
    showReverseCheck (field) {
      const status = field === 'normal' ? '0' : '1'
      this.columns = this.tempColumns
      this.detailData = this.tempAllSiteList.filter(c => c.state === status)
      // console.log({ field, list: this.detailData })
      this.zwglDetailVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.running-state-box {
  background: url("~@/assets/images/ysqjcdp/running-state-bg.png") no-repeat left bottom;
  background-size: 100% 100%;
  padding: 8px 0 24px;
  margin: 8px 3px 0;
  width: 100%;
  height: 70px;

  .online-box {
    border-image: linear-gradient(0deg, rgba(6, 90, 198, 0) 0%, #26cfff 52%, #0653b7 100%);
    border-image-slice: 1;
    border-right: 1px solid;
    color: #64f43c;
  }

  .offline-box {
    color: #7fbbff;
  }

  .running-state-desc {
    // background: linear-gradient(0deg, rgba(250, 254, 255, 0) 0%, rgba(250, 254, 255, 0.29) 100%);
    font-size: 14px;
    font-family: "Microsoft YaHei", "Microsoft YaHei-Regular", serif;
    text-align: center;
    color: #fff;
    line-height: 22px;
    letter-spacing: 0.7px;
    text-shadow: 1px 1.73px 0 0.1px rgba(16, 19, 22, 0.22);
  }
}

.pie-chart-panel {
  padding: 0 12px;
  background: linear-gradient(0deg, rgba(26, 71, 173, 0.5) 0%, rgba(4, 27, 87, 0) 100%);
  background-size: 100% 100%;
  width: 100%;

  .pie-chart {
    // width: 116px;
    // height: 116px;
    margin-right: 14px;
  }

  .pie-legend {
    width: 84px;

    .color-rect {
      position: relative;
      background-color: currentcolor;
      width: 10px;
      height: 10px;
      margin-right: 7px;
    }
  }
}

.temp-pie-chart-panel {
  width: 100%;
}

</style>
